import * as React from 'react';
import {Button, Form as AntdForm, Modal as AntdModal} from 'antd';
import {renderItems, VJsonComponent, VJsonComponentBase,} from "../factory";
import _ from "lodash";
import {PlainObject, PromiseMabe, YvanEvent} from "../types";
import {apply, applyValue, YvanEventBind, YvanEventDispatch} from "../utils/helper";
import {Scope} from "../scope";
import * as mobx from 'mobx'
import Search from "./form/search";
import ExcelImport from "./form/excelimport";
import {ErrorMsgDataItem, ImportResult} from "../xlsx";

export class WidgetBase<Input, Output, Ref> extends Scope<Input, Ref> {

    option!: WidgetOption<Input, Output>
    sender!: Search

    openWidget(option: WidgetOption<Input, Output>, sender: Search) {
        this.option = option
        this.sender = sender
        super.showDialog()
    }

    close() {
        super.close()
    }

    confirm(data: Output) {
        // 调用 onConfirm
        let result: any = undefined
        if (typeof this.option.onConfirm === 'function') {
            result = this.option.onConfirm(data)

        } else if (_.isPlainObject(this.option.bind)) {
            // @ts-ignore
            const scope = this.sender.props.$context.scopeInstance
            mobx.transaction(() => {
                _.forOwn(this.option.bind, (widgetProperty, scopeProperty) => {
                    _.set(scope, scopeProperty, data[widgetProperty])
                })
            })
            result = true
        }

        if (result) {
            applyValue(result).then(result => {
                if (!result) {
                    // 取消对话框的关闭
                    return
                }

                super.close()
            })
        }
        super.close()
    }
}

export interface WidgetOption<Input, Output> {
    content: typeof WidgetBase
    onOpen?: () => Input
    onClear?: () => void
    onConfirm?: (data: Output) => (void | PromiseMabe<boolean>)
    bind?: PlainObject
}



export type WidgetDefine<Input, Output> = Omit<WidgetOption<Input, Output>, 'content'>

export interface WidgetVJsonProp {
    title?: string
    visible?: boolean
    mask?: boolean
    okText?: string
    width?: string | number
    cancelText?: string
    zIndex?: number
    afterClose?: YvanEvent<Widget>,
    onOk?: YvanEvent<Widget>,
    onCancel?: YvanEvent<Widget>,
    items: any[]
    footer: any[]
}

export interface WidgetState {

}

@VJsonComponent({
    view: 'widget'
})
export class Widget extends VJsonComponentBase<WidgetVJsonProp, WidgetState> {
    static defaultProps = {
        title: '未命名对话框',
        okText: '确定',
        cancelText: '取消',
        visible: true,
        footer: [],
        items: []
    };

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Widget.defaultProps
        )

        props.$context.scopeInstance['$closeDialog'] = this.close.bind(this)
    }

    close() {
        this.props.vjson.visible = false
    }

    onCancelEvent() {
        if (typeof this.props.vjson.afterClose === 'undefined') {
            this.close()
        } else {
            YvanEventDispatch(this.props.vjson.afterClose, this)
        }
    }

    debugToolClick = () => {//数据
        const scope = this.props.$context.scopeInstance
        //@ts-ignore
        window.debugTool.openDebug(scope)
    }

    render() {
        return (
            // @ts-ignore
            <AntdModal key={this.key} view_id={this.key} aria-roledescription={this.view}
                       title={
                           <>{apply(this, this.props.vjson.title)}
                               {
                                   (_.has(window, 'debugTool') ?
                                       <Button style={{marginLeft: '10px'}}
                                               onClick={this.debugToolClick}>调试</Button> : null)
                               }
                           </>
                       }
                       visible={this.props.vjson.visible}
                       mask={apply(this, this.props.vjson.mask)}
                       okText={apply(this, this.props.vjson.okText)}
                       width={apply(this, this.props.vjson.width)}
                       cancelText={apply(this, this.props.vjson.cancelText)}
                       zIndex={apply(this, this.props.vjson.zIndex)}
                       afterClose={YvanEventBind(this.props.vjson.afterClose, this)}
                       footer={renderItems(this, this.props.vjson.footer)}
                       onOk={YvanEventBind(this.props.vjson.onOk, this)}
                       onCancel={this.onCancelEvent.bind(this)}
                       destroyOnClose={true}
            >

                {
                    ...renderItems(this, this.props.vjson.items)
                }

            </AntdModal>
        );
    }

}
